<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>图片轮播</title>
	<style>
		* {
			margin: 0;
			padding: 0;
		} 
		h1 {
			text-align: center;
			margin: 50px;
			font-family: Simsun;
		}
		#slider {
			width: 1000px;
			height: 667px;
			margin: 50px auto;
			font-size: 0;    /*消除图片之间的空隙*/
			position: relative;
			overflow: hidden;
		}
		#img1 {
			position: absolute;
			top: 0;
			left: 0;
		}
		#img2 {
			position: absolute;
			top: 0;
			left: 1000px;
		}
		#img3 {
			position: absolute;
			top: 0;
			left: 2000px;
		}
		#img4 {
			position: absolute;
			top: 0;
			left: 3000px;
		}
		#img5 {
			position: absolute;
			top: 0;
			left: 4000px;
		}
		#content {
			position: absolute;
			top: 0;
			left: 0;
		}
		#forward {
			background: url(images/arrow-right.png) no-repeat center center;
			background-size: 50px 50px;
			width: 100px;
			height: 667px;
			position: absolute;
			top: 0;
			left: 900px;
			z-index: 9999;
			opacity: .7;
		}
		#backward {
			background: url(images/arrow-left.png) no-repeat center center;
			background-size: 50px 50px;
			width: 100px;
			height: 667px;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 9999;
			opacity: .7;
		}
		#backward:hover,
		#forward:hover {
			opacity: 1;
			cursor: pointer;
		}
	</style>
</head>
<body>
	
	<h1>图片轮播小插件 <small>唐锐</small></h1>

	<section id="slider">
		<div id="forward"></div>
		<div id="backward"></div>
		<div id="content">
			<img src="images/public-domain-images-free-stock-photos-high-quality-resolution-downloads-public-domain-archive-11-1000x667.jpg" height="667" width="1000" id="img1">
			<img src="images/public-domain-images-free-stock-photos-high-quality-resolution-downloads-public-domain-archive-12-1000x667.jpg" height="667" width="1000" id="img2">
			<img src="images/public-domain-images-free-stock-photos-high-quality-resolution-downloads-public-domain-archive-14-1000x667.jpg" height="667" width="1000" id="img3">
			<img src="images/public-domain-images-free-stock-photos-high-quality-resolution-downloads-public-domain-archive-15-1000x667.jpg" height="667" width="1000" id="img4">
			<img src="images/public-domain-images-free-stock-photos-high-quality-resolution-downloads-public-domain-archive-9-1000x667.jpg" height="667" width="1000" id="img5">
		</div>
	</section>

	<script src="http://libs.useso.com/js/jquery/2.1.0/jquery.min.js"></script>
	<script>
		var imgs = $("#content img");
		var	index = 0;
		var len = imgs.length;

		// 下一张
		$(document).ready(function(){
			$("#forward").click(function(){
				index += 1;
				if(index < 5) {
					var ss = (index * -1000) + "px";
					$("#content").animate({left: ss},1000);	
				}				
				if(len == index) {
					$("#content").animate({left: "0"},1000);
					index = 0;
				}
			});
		});

		// 上一张
		$(document).ready(function(){
			$("#backward").click(function(){
				index -= 1;
				if(-1 == index) {
					$("#content").animate({left: "-4000px"},1000);
					index = 4;
				}
				if(index > -1) {
					var ss = (index * -1000) + "px";
					$("#content").animate({left: ss},1000);	
				}				
			});
		});

		// 自动轮播
		setInterval(function(){
				index += 1;
				if(index < 5) {
					var ss = (index * -1000) + "px";
					$("#content").animate({left: ss},1000);	
				}				
				if(len == index) {
					$("#content").animate({left: "0"},1000);
					index = 0;
				}

		},3000);

		// 以前的写得太丑扔掉

		// $(document).ready(function(){
		// 	$("#forward").click(function(){
		// 		if($("#content").css("left") == "0px"){
		// 			$("#content").animate({left: "-1000px"},1000);	
		// 		}
		// 		else if($("#content").css("left") == "-1000px"){
		// 			$("#content").animate({left: "-2000px"},1000);	
		// 		}
		// 		else if($("#content").css("left") == "-2000px"){
		// 			$("#content").animate({left: "-3000px"},1000);	
		// 		}
		// 		else if($("#content").css("left") == "-3000px"){
		// 			$("#content").animate({left: "-4000px"},1000);	
		// 		}
		// 		else {
		// 			$("#content").animate({left: "0px"},1000);		
		// 		}				
		// 	});
		// 	$("#backward").click(function(){
		// 		if($("#content").css("left") == "0px"){
		// 			$("#content").animate({left: "-4000px"},1000);	
		// 		}
		// 		else if($("#content").css("left") == "-1000px"){
		// 			$("#content").animate({left: "0px"},1000);	
		// 		}
		// 		else if($("#content").css("left") == "-2000px"){
		// 			$("#content").animate({left: "-1000px"},1000);	
		// 		}
		// 		else if($("#content").css("left") == "-3000px"){
		// 			$("#content").animate({left: "-2000px"},1000);	
		// 		}
		// 		else {
		// 			$("#content").animate({left: "-3000px"},1000);		
		// 		}				
		// 	});
		// });
		// var imgs = $("#content img"), index = 0;
		// var len = imgs.length;
		// setInterval(function(){
		// 	index += 1;
		// 	$(imgs).eq(index).animate({left: "0px"},1000)
		// 	if(index == len-1){
		// 		$(imgs).eq(0).animate({left: "0px"},1000)
		// 	}
		// },3000);
		
	</script>
</body>
</html>